<template>
	<view class="container">
		<view class="date flex justify-between">
			<text class="date-item" :class="dateIndex==index?'date-item-active':''" v-for="(item,index) in dateList"
				@tap="dateChange(index)">{{item}}</text>
		</view>

		<view class="record-picker flex align-center justify-center">
			<text class="start-time" @tap="startShow=true">{{startTime}}</text>
			<text class="splite">-</text>
			<text class="end-time" @tap="endShow=true">{{endTime}}</text>
			<text class="search-btn" @tap="requestApi">查询</text>
		</view>
		<view class="total-info flex justify-between align-center">
			<text class="total-item flex align-center">
				<text class="label">平仓总手数:</text>
				<text class="down-color value">{{totalCount}}</text>
			</text>
			<text class="total-item flex align-center">
				<text class="label">总盈亏:</text>
				<text class="value" :class="totalPluss>=0?'up-color':'down-color'">{{totalPluss}}</text>
			</text>
		</view>
		<scroll-view scroll-y="true" class="record-list">
			<view class="record-item" v-for="(item,index) in recordList" :key="index">
				<view class="flex justify-between complate-item-content">
					<view class="left-wrapper flex flex-column justify-between">
						<view class="flex align-center">
							<text class="name mr-40">{{item.ptitle}}</text>
							<text class="right-text mr-20"
								:class="item.ostyle==0?'up-color':'down-color'">{{item.ostyle==0?'买入':'卖出'}} </text>
							<text class="right-text"
								:class="item.ostyle==0?'up-color':'down-color'">{{item.onumber}}手</text>
						</view>
				
						<view class="price flex align-center">
							<text class="order-price mr-40">{{item.buyprice}}</text>
							<text class="close-price"> → {{item.sellprice}}</text>
						</view>
					</view>
					<view class="right-wrapper flex flex-column justify-between">
						<view class="time">{{item.selltime|time}}</view>
						<view class="ying-kui" :class="parseFloat(item.ploss)>0?'up-color':'down-color'">{{item.ploss}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-picker mode="time" v-model="startShow" :default-time="defaultTime" @confirm="startCallback"></u-picker>
		<u-picker mode="time" v-model="endShow" :default-time="defaultTime" @confirm="endCallback"></u-picker>
	</view>
</template>

<script>
	const day = 1000 * 60 * 60 * 24
	const week = day * 7
	const month = day * 30
	const three_month = month * 3
	export default {
		data() {
			return {
				dateList: ["当日", "最近一周", "最近一月", "最近三月"],
				dateIndex: 0,
				startShow: false,
				endShow: false,
				startTime: "",
				endTime: "",
				defaultTime: "",
				recordList:[],
				totalCount:0,
				totalPluss:0
			};
		},
		methods: {
			startCallback({year,month,day}){
				this.startTime=`${year}-${month}-${day}`
			},
			endCallback({year,month,day}){
				this.endTime=`${year}-${month}-${day}`
			},
			async requestApi(){
				try{
					let res=await this.$u.api.historyRecordApi({
						start_date:this.startTime,
						end_date:this.endTime
					})
					this.recordList=res.list
					this.totalCount=res.onumber_sum
					this.totalPluss=res.ploss_sum
				}catch(e){
					//TODO handle the exception
				}
			},
			dateChange(index) {
				if (this.dateIndex == index) {
					return false
				}
				this.dateIndex = index
				let date
				let current_data
				switch (index) {
					case 0:
						date = this.getCurrentTime()
						this.startTime = date
						this.endTime = date
						break
					case 1:
						date = this.calc_time(week)
						current_data=this.getCurrentTime()
						this.startTime = date
						this.endTime = current_data
						break
					case 2:
						date = this.calc_time(month)
						current_data=this.getCurrentTime()
						this.startTime = date
						this.endTime = current_data
						break
					case 3:
						date = this.calc_time(three_month)
						current_data=this.getCurrentTime()
						this.startTime = date
						this.endTime = current_data
						break
				}
				this.requestApi()
			},
			getCurrentTime() {
				let date = new Date()
				let year = date.getFullYear()
				let month = (date.getMonth() + 1 + "").padStart(2, '0')
				let day = (date.getDate() + "").padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			calc_time(value) {
				let time = new Date().getTime()
				let date = new Date(time - value)
				let year = date.getFullYear()
				let month = (date.getMonth() + 1 + "").padStart(2, '0')
				let day = (date.getDate() + "").padStart(2, '0')
				return `${year}-${month}-${day}`
			}
		},
		onLoad() {
			this.defaultTime = this.getCurrentTime()
			this.startTime = this.defaultTime
			this.endTime = this.defaultTime
			this.requestApi()
		}
	}
</script>

<style lang="scss">
	.container {
		.date {
			padding: 30rpx;
			background-color: #fff;
			border-bottom: 1rpx solid $color-gray;

			.date-item {
				width: 20%;
				text-align: center;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #999;
				background-color: $color-gray;
				border-radius: 5rpx;
			}

			.date-item-active {
				background-color: $color-blue;
				color: #fff;
			}
		}
		
		.record-picker {
			padding: 30rpx;
			background-color: #fff;

			.start-time {
				padding: 5rpx 30rpx;
				border-radius: 15rpx;
				font-size: 24rpx;
				color: #999;
				background-color: $color-gray;
			}

			.splite {
				margin: 0 10rpx;
				font-size: 24rpx;
				color: #333;
			}

			.end-time {
				padding: 5rpx 30rpx;
				border-radius: 15rpx;
				font-size: 24rpx;
				color: #999;
				background-color: $color-gray;
			}

			.search-btn {
				margin-left: 20rpx;
				height: 50rpx;
				width: 70rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: $color-blue;
				font-size: 24rpx;
				color: #fff;
				border-radius: 5rpx;
			}
		}
		.total-info{
			padding: 30rpx;
			border-bottom: 1rpx solid $color-gray;
			background-color: #fff;
			.label{
				font-size: 24rpx;
				color: #333;
			}
			.value{
				font-size: 24rpx;
			}
		}
		.record-list{
			background: #fff;
			height: calc(100% - 312rpx);
			.record-item{
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F0F8FF;
				.complate-item-content {
					min-height: 80rpx;
				}
				
				.right-text {
					font-size: 24rpx;
				}
				
				.left-wrapper {
					.name {
						font-size: 28rpx;
						width: 100rpx;
					}
				
					.order-price {
						width: 100rpx;
						font-size: 24rpx;
						font-weight: bold;
					}
				
					.close-price {
						font-size: 24rpx;
						font-weight: bold;
					}
				
					.now-price {
						font-size: 24rpx;
						font-weight: bold;
					}
				
					.label {
						font-size: 20rpx;
						color: #999;
					}
				
					.value {
						font-size: 20rpx;
						color: #999;
					}
				
				}
				
				.right-wrapper {
				
					.ying-kui {
						font-size: 28rpx;
						text-align: right;
						font-weight: bold;
					}
				
					.time {
						font-size: 20rpx;
						color: #999;
						text-align: right;
					}
				}
				
				.mr-20 {
					margin-right: 20rpx;
				}
				
				.mr-40 {
					margin-right: 40rpx;
				}
				
				.mr-10 {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
